<%@ page contentType="text/html;charset=ISO-8859-1" %>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
		<meta name="layout" content="main"/>
		<title>Random Book</title>
		<link 
			rel="stylesheet" 
			href="<g:createLinkTo 
				dir='css' 
				file='snazzy.css'/>" />
	    <g:javascript library="jquery" plugin="jquery"/>
		<r:require module="jquery"/>
	</head>
	<body>
		<div id="header">
			<img src="<g:createLinkTo dir='images' file='logo.png'/>" alt="logo" />
		</div>
		
		<ul id="menu" >
		    <li style="border:1px outset blue; float:left;line-height:10px;border-radius:4px 4px 4px 4px;padding:6px 3px 3px 6px;">
				<g:remoteLink action="randomBookAjax" update="book">
					Next Random Book
				</g:remoteLink>
			</li>
			<li style="border:1px outset blue;float:right;line-height:10px;border-radius:4px 4px 4px 4px;padding:6px 3px 3px 6px;">
				<g:link action="list">
					Administration
				</g:link>
			</li>
			
		</ul>
		
		<br/><br/>
		<div style="text-transform:lowercase;font-size:75%;"> - page initially loaded at: <g:formatDate/></div>
		<br/>
		
		<div id="book">
			<table>
			<tr>
			  <td width="20%"><b>Title:</b></td>
			  <td><q>${book.title}</q></td>
			</tr>
			<tr>
			  <td colspan="2">
			    <table>
			      <tr>
			        <td><b>Category</b></td>
			        <td><b>Language</b></td>
			        <td><b>ISBN</b></td>
			        <td><b>Grade Levels</b></td>
			      </tr>
			      <tr>
			        <td>${book.category}</td>
				    <td>${book.language}</td>
				    <td>${book.isbn}</td>
				    <td>${gradeLevel}</td>
				  </tr>
				</table>
			  </td>
			</tr>
			<tr>
				<td><b>Description:</b></td>
				<td>${book.description}</td>
			</tr>
			<tr>
				<td><b>Author:</b></td>
				<td>${book.author}</td>
			</tr>
			</table>
		</div>
	</body>
</html>